<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="vue_det">
  <child content1="Dell"></child>
  <child content1="Mark" ></child>
</div>
<script type="text/javascript">

  Vue.prototype.bus=new Vue();

  Vue.component('child',{
    data:function(){
      return {
        selfContent:this.content1
      }
    },
    props:{
      content1:String
    },
    template:'<div @click="handleChick">{{selfContent}}</div>',
    methods:{
      handleChick:function(){
        this.bus.$emit("change",this.selfContent);
      }
    },
    mounted:function(){
      var this_=this
      this.bus.$on('change',function(msg){
        this.selfContent=msg
      })
    }
  })

  var vm = new Vue({
    el: '#vue_det'
  })
</script>
</body>
</html>
